<template>
  <div id="contentBox">
    <div class="searchForm">
      <el-select v-model="listQuery.rank" placeholder="请选择展示人数">
        <el-option label="展示前50人" value="1" />
        <el-option label="展示前100人" value="2" />
        <el-option label="展示前200人" value="3" />
      </el-select>
      <el-input v-model="listQuery.username" placeholder="搜索用户名字" class="input-with-select" maxlength="30" show-word-limit clearable>
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>
    <el-table
      ref="filterTable"
      :data="list"
      style="width: 100%"
      border
      fit
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column prop="name" label="用户昵称" align="center" />
      <el-table-column
        prop="income"
        label="昨日收益"
        column-key="date"
        sortable
        :filters="[{text: '近一个月收益', value: '近一个月收益'}, {text: '近二个月收益', value: '近二个月收益'}, {text: '近三个月收益', value: '近三个月收益'}, {text: '近四个月收益', value: '近四个月收益'}]"
        :filter-method="filterHandler"
        align="center"
      />
      <el-table-column
        prop="count"
        label="团队人数"
        column-key="date"
        sortable
        :filters="[{text: '最多', value: '近一个月收益'}, {text: '最少', value: '近四个月收益'}]"
        :filter-method="filterHandler"
        align="center"
      />
      <el-table-column
        prop="date"
        label="开始时间"
        column-key="date"
        sortable
        :filters="[{text: '最新', value: '近一个月收益'}, {text: '最久', value: '近四个月收益'}]"
        :filter-method="filterHandler"
        align="center"
      />
      <el-table-column prop="phone" label="联系电话" :formatter="formatter" align="center" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'DistributionList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      listQuery: {
        rank: '', // 排名
        username: ''
      },
      list: [
        {
          date: '2016-05-01',
          name: '王一虎',
          phone: '18300000001',
          tag: '家',
          count: '11',
          income: '10￥'
        },
        {
          date: '2016-05-02',
          name: '王二虎',
          phone: '18300000002',
          tag: '公司',
          count: '13',
          income: '100￥'
        },
        {
          date: '2016-05-03',
          name: '王三虎',
          phone: '18300000003',
          tag: '家',
          count: '16',
          income: '1000￥'
        },
        {
          date: '2016-05-04',
          name: '王五虎',
          phone: '18300000004',
          tag: '公司',
          count: '17',
          income: '10000￥'
        }
      ],
      tableKey: 0,
      total: 1
    }
  },
  methods: {
    // 切换分页
    getList() {},
    formatter(row, column) {
      return row.phone
    },
    filterHandler(value, row, column) {
      // console.log(value);
      console.log(row)
      // console.log(column);
      const isIncount = row['count']
      return isIncount === '11'
    }
  }
}
</script>

<style lang='scss' scoped>
#contentBox {
  padding: 10px 20px;
  .searchForm {
    display: flex;
    margin-bottom: 10px;
  }
  .el-input {
    width: 570px;
    margin-left: 20px;
  }
}
</style>
